<template>
	<contents :heightInclude="['tabBar']" class="bind_phone_page">
		<u-form
			:model="form"
			ref="form"
			label-width="165"
			:label-style="{ paddingRight: '15rpx' }"
		>
			<u-form-item :label="$t('locales.region')" prop="countryName">
				<u-input
					:border="false"
					type="select"
					:select-open="showCountry"
					v-model="form.countryName"
					:placeholder="$t('locales.switchRgeion')"
					@click="showCountry = true"
				></u-input>
			</u-form-item>
			<u-form-item :label="$t('locales.phone')" prop="mobile">
				<u-input v-model="form.mobile" :placeholder="$t('locales.inputPhone')" type="number" />
			</u-form-item>
			<u-form-item :label="$t('locales.SMSCode')" prop="validateCode">
				<u-input
					type="number"
					maxlength="6"
					v-model="form.validateCode"
					:placeholder="$t('locales.inputSMSCode')"
				/>
				<SetCode
					slot="right"
					:phone="form.mobile"
					uniqueKey="bindphone"
				/>
			</u-form-item>
		</u-form>
		<u-picker
			v-model="showCountry"
			mode="selector"
			:range="countryList"
			range-key="country"
			@confirm="pickerConfirm"
		></u-picker>
		<SubmitBtn @click="submit" />
	</contents>
</template>

<script>
import SetCode from '@/components/setSmsCode'
import SubmitBtn from '@/components/submitBtn'
import { bindWeChat, countryCurrency } from '@/api/http/user'
import storage from '@/util/storage'
export default {
	components: {
		SetCode,
		SubmitBtn
	},
	data() {
		return {
			form: {
				openId: '',
				mobile: '',
				validateCode: '',
				mobileAttribution: '',
				countryName: ''
			},
			showCountry: false,
			countryList: [],
			rules: {
				countryName: [
					{
						required: true,
						message: this.$t('locales.switchRgeion'),
						trigger: 'blur'
					}
				],
				mobile: [
					{
						required: true,
						message: this.$t('locales.inputPhone'),
						trigger: 'blur'
					}
				],
				validateCode: [
					{
						required: true,
						message: this.$t('locales.inputSMSCode'),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('locales.digitErr'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	onLoad(opt) {
		this.form.openId = opt.openId || ''
		this.getData()
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		getData() {
			countryCurrency().then(res => {
				if (res.code === 200) {
					this.countryList = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			})
		},
		pickerConfirm(row) {
			const data = this.countryList[row[0]]
			this.form.mobileAttribution = data.id
			this.form.countryName = data.country
		},
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return
				bindWeChat({
					...this.form
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					if (res.code === 200) {
						storage.set('token', res.data)
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)
					}
				})
			})
		}
	}
}
</script>

<style lang="scss">
.bind_phone_page {
	.u-form {
		padding: 0 30rpx;
		background-color: #fff;
	}
}
</style>
